<template>
	<view>
		<uni-nav-bar left-icon="arrowthinleft" title="招聘" :border="false" :fixed="true" bg="bg-fff" color="#333" @clickLeft="goBack()"></uni-nav-bar>
		<view class="margin-top-20">
			<view class="padding-x-24 padding-y-30 bg-fff solid-bottom flex align-center justify-between">
				<text class="fs-28 color-333 w25">我要招聘</text>
				<input type="text" v-model="subInfo.position" placeholder="请输入职位" class="fs-26 color-333 flex1">
			</view>
			<view class="padding-x-24 padding-y-30 bg-fff solid-bottom flex align-center justify-between">
				<text class="fs-28 color-333 w25">标题</text>
				<input type="text" v-model="subInfo.title" placeholder="请输入标题" class="fs-26 color-333 flex1">
			</view>
			<view class="padding-x-24 padding-y-30 bg-fff solid-bottom flex align-center justify-between">
				<text class="fs-28 color-333 w25">月薪</text>
				<input type="text" v-model="subInfo.income" placeholder="请输入" class="fs-26 color-333 flex1">
				<!-- <label class="flex align-center">
					<checkbox /><text  class="fs-26 color-333">面议</text>
				</label> -->
			</view>
			<view class="padding-x-24 padding-y-30 bg-fff solid-bottom flex align-center justify-between">
				<text class="fs-28 color-333 w25">福利待遇</text>
				<input type="text" v-model="subInfo.welfare" placeholder="选择提供的福利，如包吃包住" class="fs-26 color-333 flex1">
			</view>
			<view class="padding-x-24 padding-y-30 bg-fff solid-bottom flex align-center justify-between">
				<text class="fs-28 color-333 w25">职位描述</text>
				<input type="text" v-model="subInfo.describe" placeholder="请输入" class="fs-26 color-333 flex1">
			</view>
			<view class="padding-x-24 padding-y-10 bg-fff solid-bottom flex align-center">
				<text class="fs-28 color-333 w25">学历要求</text>
				<picker  :range="educationArr" @change="checkEducation" :value="educationIndex">
					<view class="fs-26 color-666 h40" style="line-height: 80rpx;">{{educationArr[educationIndex] || '请选择学历'}}</view>
				</picker>
				
				<!-- <input type="text" v-model="subInfo.education" placeholder="请输入" class="fs-26 color-333 flex1"> -->
			</view>
			<view class="padding-x-24 padding-y-30 bg-fff solid-bottom flex align-center justify-between">
				<text class="fs-28 color-333 w25">工作年限</text>
				<input type="text" v-model="subInfo.experience"  placeholder="请输入" class="fs-26 color-333 flex1">
			</view>
			<view @tap="selarea()" class="padding-x-24 padding-y-30 bg-fff solid-bottom flex align-center justify-between">
				<text class="fs-28 color-333 w25">工作地点</text>
				<input type="text" disabled v-model="subInfo.address" placeholder="请选择工作地址" class="fs-26 color-333 flex1">
				<!-- <image style="width: 36rpx;height: 36rpx;" src="../../static/img/ads.png"></image> -->
			</view>
			<view class="padding-x-24 padding-y-30 bg-fff solid-bottom flex align-center justify-between">
				<text class="fs-28 color-333 w25">工作时间</text>
				<input type="text" v-model="subInfo.time" placeholder="请输入工作时间" class="fs-26 color-333 flex1">
			</view>
			<view class="padding-x-24 padding-y-30 bg-fff solid-bottom flex align-center justify-between">
				<text class="fs-28 color-333 w25">人数</text>
				<input type="text" v-model="subInfo.num" placeholder="请输入招聘人数" class="fs-26 color-333 flex1">
			</view>
			<view class="padding-x-24 padding-y-30 bg-fff solid-bottom flex align-center justify-between">
				<text class="fs-28 color-333 w25">联系电话</text>
				<input type="text"  v-model="subInfo.mobile" placeholder="请输入手机号码" class="fs-26 color-333 flex1">
			</view>
		</view>
		<view class="margin-top-20" style="padding-bottom: 150rpx;">
			<view class="padding-x-24 padding-y-30 bg-fff solid-bottom flex align-center justify-between">
				<text class="fs-28 color-333 w25">公司名称</text>
				<input type="text" v-model="subInfo.company_name" placeholder="请输入营业执照上的名称" class="fs-26 color-333 flex1">
			</view>
			<view class="padding-x-24 padding-y-30 bg-fff solid-bottom flex align-center justify-between">
				<text class="fs-28 color-333 w25">公司地址</text>
				<input type="text" v-model="subInfo.company_address" placeholder="请输入公司/店铺地址" class="fs-26 color-333 flex1">
			</view>
			<view class="padding-x-24 padding-y-30 bg-fff solid-bottom flex align-center justify-between">
				<text class="fs-28 color-333 w25">公司简介</text>
				<input type="text" v-model="subInfo.company_describe" placeholder="请输入公司简介" class="fs-26 color-333 flex1">
			</view>
		</view>
		<view v-if="!subInfo.id" style="bottom: 0;" class="fixed w100 bg-fff padding-y-24 margin-top-60 flex align-center justify-center  padding-right-24">
			<view @click="submit()" class="fs-28 color-fff callBtn  text-center">发布</view>
		</view>
		
		<view v-if="subInfo.id" style="bottom: 0;" class="fixed w100 bg-fff padding-y-24 margin-top-60 flex align-center justify-center  padding-right-24">
			<view @click="submit()" class="fs-28 color-fff callBtn  text-center">修改</view>
		</view>
		
		<uni-popup ref="area" type="bottom">
			<view class="area_wrap bg-fff padding-40 radius-top30 relative">
				<image class="area_close" src="../../static/img/close_icon.png" mode="aspectFit" @tap="close()"></image>
				<view class="fs-32 fw-bold text-center">请选择地区</view>
				<view class="flex align-center padding-y-30">
					<text class="area_sel text-cut padding-x-16" v-for="(item, index) in arr" :key="index" @tap="selText(item, index)">{{item.label}}</text>
					<text class="area_sel color-zhuse" v-if="hasMore">请选择</text>
				</view>
				<scroll-view scroll-y class="area_box padding-y-40">
					<view class="fs-28 color-333 padding-y-16 text-cut" :class="{'fw-bolder color-zhuse':current == index }" v-for="(item, index) in list" :key="item.value" @tap="toggle(item, index)">
						<image v-if="current == index" class="duihao" src="../../static/img/duihao.png" mode="aspectFit"></image>
						{{item.label}}
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				subInfo:{
					category_id:'',
					title:'',
					position:'',
					income:'',
					welfare:'',
					describe:'',
					education:'',
					experience:'',
					address:'',
					time:'',
					mobile:'',
					company_name:'',
					company_address:'',
					region:'',
					company_describe:'',
					num:'',
				},
				
				area:'',
				list:[],
				arr:[],
				current:-1,
				textCurrent:0,
				
				hasMore:true,
				
				educationArr:['小学','初中','高中','大专','本科','研究生','硕士','博士'],
				educationIndex:-1,
				
			}
		},
		onLoad(opt) {
			if(opt.id){
				this.subInfo.id  =  opt.id;
				this.getInfo()
			}
			this.subInfo.category_id  =  opt.cate_id;
			this.init();
		},
		methods:{
			getInfo(){
				this.$api.recruit_detail({recruit_id:this.subInfo.id}).then(res=>{
					if(res.code == 1){
						if(res.data){
							this.subInfo.category_id = res.data.category_id;
							this.subInfo.title = res.data.title;
							this.subInfo.position = res.data.position;
							this.subInfo.income = res.data.income;
							this.subInfo.welfare = res.data.welfare;
							this.subInfo.describe = res.data.describe;
							this.subInfo.education = res.data.education;
							this.subInfo.experience = res.data.experience;
							this.subInfo.address = res.data.address;
							this.subInfo.time = res.data.time;
							this.subInfo.mobile = res.data.mobile;
							this.subInfo.company_name = res.data.company_name;
							this.subInfo.company_address = res.data.company_address;
							this.subInfo.region = res.data.region;
							this.subInfo.company_describe = res.data.company_describe;
							this.subInfo.num = res.data.num;
							
							this.educationArr.forEach(function(item,index){
								if(that.subInfo.education == item){
									that.educationIndex = index
								}
							})
							// this.status = res.data.status;
						}
					}
				})
			},
			
			// 学历
			checkEducation(e){
				this.educationIndex = e.detail.value;
				this.subInfo.education = this.educationArr[this.educationIndex]
			},
			
			submit(){
				if(!this.subInfo.position){
					this.$msg('请填写招聘职位');
					return false
				}
				if(!this.subInfo.income){
					this.$msg('请填写薪资');
					return false
				}
				if(!this.subInfo.welfare){
					this.$msg('请填写福利待遇');
					return false
				}
				if(!this.subInfo.education){
					this.$msg('请填写学历要求');
					return false
				}
				if(!this.subInfo.address){
					this.$msg('请填写工作地点');
					return false
				}
				if(!this.subInfo.time){
					this.$msg('请填写工作时间');
					return false
				}
				if(!this.subInfo.num){
					this.$msg('请填写招聘人数');
					return false
				}
				if(!this.subInfo.mobile){
					this.$msg('请填写联系电话');
					return false
				}
				
				if(this.arr.length){
					this.subInfo.region = this.arr[this.arr.length - 1].value;
				}
				this.$api.publish_recruit(this.subInfo).then(res => {
					this.$msg(res.msg);
					if(res.code == 1){
						setTimeout(()=>{
							uni.switchTab({
								url:'/pages/my/my'
							})
						}, 300)
					}
				});
			},
			
			
			reset(){
				this.list = [];
				this.arr = [];
				this.current = -1;
				this.textCurrent = 0;
				this.area = '';
				this.init();
			},
			init(region){
				var data = {
					region: region || ''
				}
				this.$api.getRegion(data).then(res => {
					if(res.code == 1){
						this.list = res.data;
						if(this.list.length > 0){
							this.list.forEach((m,i)=>{
								if(this.arr[this.textCurrent] && m.value == this.arr[this.textCurrent].value){
									this.current = i;
								}
							})
						}
					}else{
						if(res.data.length == 0){
							console.log("----")
							this.hasMore = false
							this.subInfo.address = '';
							this.arr.forEach((item, index)=>{
								this.subInfo.address += item.label;
							})
							this.$refs.area.close();
						}else{
							console.log("=====")
							this.hasMore = true
						}
					}
				});
			},
			toggle(item, index){
				this.current = index;
				this.init(item.value);
				this.arr[this.textCurrent] = item;
				if(this.textCurrent+1 < this.arr.length){
					this.arr = this.arr.slice(0, this.textCurrent+1)
				}
				/* if(this.arr.length == 3){
					this.area = this.arr[0].label+this.arr[1].label+this.arr[2].label;
					this.$refs.area.close();
				} */
				this.textCurrent++;
				this.current = -1;
			},
			selarea(){
				this.$refs.area.open();
				/* if(this.arr.length == 3){
					this.textCurrent = 2;
					this.init(this.arr[1].value);
				}else{
					this.reset();
				} */
				if(!this.hasMore){
					if(this.arr.length == 1){
						this.textCurrent = this.arr.length - 1;
						this.init();
					}
					if(this.arr.length > 1){
						this.textCurrent = this.arr.length - 1;
						this.init(this.arr[this.arr.length - 2].value || '');
					}
					if(this.arr.length == 0){
						this.reset();
					}
				}
			},
			selText(item, index){
				this.textCurrent = index;
				if(index == 0){
					this.init();
				}else{
					this.init(this.arr[index-1].value);
				}
			},
			close(){
				if(this.arr.length < 3){
					this.reset();
				}
				this.$refs.area.close();
			},
		}
	}
</script>

<style>
	page{
		background: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	/deep/ uni-checkbox .uni-checkbox-input{border-radius: 100%;transform: scale(0.7);}
	.callBtn {
		width: 560rpx;
		height: 84rpx;
		line-height: 84rpx;
		border-radius: 10rpx;
		background: linear-gradient(to bottom, #FDA730, #FE810A);
	}
</style>
